<template>
	<view>
		<!-- #ifdef H5 -->
		<uni-nav-bar left-icon="back" @clickLeft="back" :border="false" title="订单详情"></uni-nav-bar>
		<!-- #endif -->
		<view class="movie">
			<view class="movie_info">
				<img class="movie_info_pic" :src="movie_info.pic" />
				<view class="movie_info_text">
					<view class="movie_info_text_name">
						{{ movie_info.name }}
						<text class="movie_info_text_type">{{ movie_info.versionTypes }}</text>
					</view>
					<view class="movie_info_text_time" >开场时间:{{ base_data.showTime | formatTime }}</view>
					<view class="movie_info_text_address">{{ base_data.cinemaName }}</view>
					<view class="movie_info_text_room">{{ base_data.hallName }}</view>
				</view>
			</view>
			<view class="movie_line"></view>
			<view class="movie_notice">
				<view class="movie_notice_item">
					<uni-icons color="red" type="close" size="22" />
					<view class="movie_notice_item_text">不支持退票</view>
				</view>
				<view class="movie_notice_item">
					<uni-icons color="red" type="close" size="22" />
					<view class="movie_notice_item_text">不支持改签</view>
				</view>
				<view class="movie_notice_item">
					<uni-icons color="red" type="help-filled" size="22" />
					<view class="movie_notice_item_explain">退改签须知</view>
				</view>
			</view>
		</view>
		<view class="seat">
			<view class="seat_item">
				<view class="seat_item_title">座位</view>
				<view class="seat_item_box">
					<text class="seat_item_box_seat">{{ base_data.seatListStr }}</text>
				</view>
			</view>
			<view class="seat_item">
				<view class="seat_item_title">座位备选</view>
				<switch color="#f9ba37" @change="switchChange" />
			</view>
			<view class="seat_item">
				<view class="seat_item_title">手机号</view>
				<input style="text-align: right;" type="number" v-model="phone" maxlength="11" placeholder="请填写手机号" />
			</view>
		</view>
		<view class="money">
			<view class="money_item">
				<view class="money_item_title">数量</view>
				<view class="money_item_num">
					<text>{{ base_data.seatLength }}</text>
					<text style="margin-left: 8rpx;">张</text>
				</view>
			</view>
			<view class="money_item">
				<view class="money_item_title">原价</view>
				<view class="money_item_old">￥{{ base_data.Price / 100 }}</view>
			</view>
			<view class="money_item">
				<view class="money_item_title">优惠</view>
				<view class="money_item_new">￥{{coupon.type? coupon.type==1? ((base_data.Price - base_data.vipPrice) /100)-coupon.num: (((base_data.Price - base_data.vipPrice) /100)* coupon.num).toFixed(2) : (((base_data.Price - base_data.vipPrice) /100)) }}</view>
				
			</view>
			<view class="money_item" @click="goToCoupon">
				<view class="money_item_title">神券</view>
				<view class="money_item_coupon">
					<text v-if="coupon.type">{{ coupon.type==1?'立减'+coupon.num :coupon.num*100+'折' }}</text>
					<text v-else>未使用</text>
				</view>
			</view>
		</view>
		<view class="explain">
			<view class="explain_title">
				<view class="explain_title_text">购票须知</view>
				<view class="explain_title_radio" @click="changeExplain">
					<uni-icons :color="explain_status ? '#f9ba37' : '#e6e6e6'" :type="explain_status ? 'checkbox-filled' : 'circle'" size="20"></uni-icons>
					<view class="explain_title_radio_text">{{ explain_status ? '已读' : '未读' }}</view>
				</view>
			</view>
			<view class="explain_item">1.付款成功后5-40分钟为您出票</view>
			<view class="explain_item">2.此电影票为特价电影票，请确认购买时间和场次无误，付款成功后将无法退票、改签</view>
			<view class="explain_item">3.出票成功后在我的订单查询，顶级进入查看取票信息，在影院任意自助机或者前台取票，超时未出票请联系客服 133 6010 7490处理</view>
			<view class="explain_item">
				4.用户下单即同意
				<uni-link color="rgb(0, 123, 255)" href="https://movie.lingzhitiancheng.cn/api/agreement" text="《 用户购票协议》"></uni-link>
			</view>
		</view>
		<view class="btn" @click="payBtn(coupon.type? coupon.type==1? ((base_data.vipPrice / 100 )-coupon.num).toFixed(2): ((base_data.Price  / 100 )* coupon.num).toFixed(2) : (base_data.vipPrice / 100 ).toFixed(2) )">
			<view class="btn_money">
				<view class="btn_money_title">实际付款：</view>
				<view class="btn_money_num">￥{{coupon.type? coupon.type==1? ((base_data.vipPrice / 100 )-coupon.num).toFixed(2): ((base_data.Price  / 100 )* coupon.num).toFixed(2) : (base_data.vipPrice / 100 ).toFixed(2) }}</view>
			</view>
			<view class="btn_pay">立即购买</view>
		</view>
	</view>
</template>

<script>
import Login from '../../utils/login.js';
import Route from '../../utils/route.js';
export default {
	data() {
		return {
			// 优惠券
			coupon: {},
			// 基础数据
			base_data: {},
			movie_info: {},
			// 是否已读
			explain_status: 0,
			auto_status: 0,
			phone:'',
		};
	},
	async onLoad(e) {
		// 接参
		this.base_data = JSON.parse(e.data);
		this.base_data.seatListStr = this.base_data.seatList.join(',');
		this.phone = uni.getStorageSync('phone')
		await this.getMovieInfo(JSON.parse(e.data).filmId);

	},
	onShow() {
			if (uni.getStorageSync('coupon')) {
				this.coupon = uni.getStorageSync('coupon');
				uni.removeStorageSync('coupon');
			}
	},
	filters: {
		coupon_sum(num){
			let status = this.coupon;
			if(status){
				return coupon.type==1? num- coupon.num: num* coupon.num
			}else{
				return num;
			}
			
			return this.coupon;
		},
		formatTime(timestamp) {
			var date = new Date(timestamp * 1000); //timestamp 为10位需*1000，timestamp 为13位的话不需乘1000
			var Y = date.getFullYear() + '-';
			var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
			var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
			var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
			var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
			var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
			return Y + M + D + h + m + s;
		}
	},
	methods: {
		// 获取电影数据
		async getMovieInfo(e) {
			let res = await Route.movie_info({ filmId: e });
			this.movie_info = res.info;
		},
		// 自动换座
		switchChange(e) {
			this.auto_status = e.detail.value ? 1 : 0;
		},
		// 返回
		back() {
			uni.navigateBack();
		},
		// 购票须知
		changeExplain(e) {
			this.explain_status = !this.explain_status;
		},
		// 使用优惠券
		goToCoupon() {
			uni.navigateTo({
				url: '../coupon/coupon'
			});
		},
		// 立即购买
		async payBtn(e) {
			if(!this.phone){
				return uni.showToast({
					title: '请填写手机号',
					duration: 2000,
					icon: 'none'
				});
			}
			if (!this.explain_status) {
				return uni.showToast({
					title: '请勾选购票需知',
					duration: 2000,
					icon: 'none'
				});
			}

			let data = {
				lottery_id:this.coupon.lottery_id||'',
				order_num: this.base_data.order_num || '',
				uid: uni.getStorageSync('userInfo').uid,
				openid: uni.getStorageSync('openid'),
				filmId: this.movie_info.filmId,
				filmName: this.movie_info.name,
				reservedPhone: this.phone,
				filmPic: this.movie_info.pic,
				cinemaName: this.base_data.cinemaName,
				hallName: this.base_data.hallName,
				showTime: this.base_data.showTime,
				showId: this.base_data.showId,
				seat: this.base_data.seatListStr,
				reservedPrice: Math.ceil(e*100),
				acceptChangeSeat: this.auto_status,
				seatNo: this.base_data.seatList.join('|'),
				payType: 'mini'
			};
			// #ifdef MP-WEIXIN
			uni.showLoading();
			let res = await Route.pay(data);
			this.doWxPay(res);
			// #endif
		},
		// 微信支付
		doWxPay(param) {
			uni.requestPayment({
				timeStamp: param.timeStamp,
				nonceStr: param.nonceStr,
				package: param.package,
				signType: param.signType,
				paySign: param.paySign,
				success: function(event) {
				},
				fail: function(error) {
					uni.showToast({
						title: '支付失败',
						icon: 'none'
					});
				},
				complete: function() {
					uni.hideLoading();
					uni.redirectTo({
						url: '../order/order'
					});
				}
			});
		}
	}
};
</script>

<style lang="scss">
page {
	padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
	padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
}
.movie {
	margin: 0 auto;
	border-radius: 13rpx;
	padding: 30rpx;
	margin-top: 49rpx;
	width: 630rpx;
	background: #fff;
	height: 400rpx;
	position: relative;
	background: radial-gradient(circle at left bottom, transparent 22rpx, #f9ba37 0) top left / 346rpx 350rpx no-repeat,
		radial-gradient(circle at right bottom, transparent 22rpx, #f9ba37 0) top right / 346rpx 350rpx no-repeat,
		radial-gradient(circle at left top, transparent 22rpx, #fff 0) bottom left / 346rpx 110rpx no-repeat,
		radial-gradient(circle at right top, transparent 22rpx, #fff 0) bottom right / 346rpx 110rpx no-repeat;

	&_info {
		height: 266rpx;
		display: flex;
		flex-direction: row;
		&_pic {
			border-radius: 13rpx;
			width: 186rpx;
			height: 266rpx;
		}
		&_text {
			width: 410rpx;
			margin-left: 25rpx;
			display: flex;
			flex-direction: column;
			font-size: $uni-font-size-base;
			color: #fff;
			&_name {
				font-size: $uni-font-size-lg;
				font-weight: 900;
			}
			&_type {
				font-weight: 300;
				font-size: $uni-font-size-base;
				margin-left: 10rpx;
			}
			&_time {
				margin-top: 22rpx;
			}
			&_address,
			&_room {
				margin-top: 8rpx;
			}
		}
	}
	&_line {
		position: absolute;
		top: 350rpx;
		left: 0;
		right: 0;
		height: 6rpx;
		margin: auto;
		width: 643rpx;
		background: linear-gradient(to right, $template-line, $template-line 16rpx, transparent 16rpx, transparent);
		background-size: 10px 100%;
	}
	&_notice {
		margin-top: 100rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		&_item {
			display: flex;
			flex-direction: row;
			align-items: center;
			&_text {
				font-size: $uni-font-size-base;
				color: red;
				margin-left: 8rpx;
			}
			&_explain {
				font-size: $uni-font-size-base;
				color: #111;
				font-weight: 900;
				margin-left: 8rpx;
			}
		}
	}
}

.seat {
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	border-radius: 13rpx;
	padding: 30rpx;
	margin-top: 33rpx;
	width: 630rpx;
	background: #fff;
	height: 133rpx;
	&_item {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		font-size: $uni-font-size-lg;
		&_title {
			color: #111;
		}
		&_box {
			display: flex;
			flex: 1;
			flex-direction: row;
			justify-content: flex-end;
			&_seat {
				font-size: $uni-font-size-lg;
				color: $uni-text-color-grey;
			}
		}
	}
}
.money {
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	border-radius: 13rpx;
	padding: 30rpx;
	margin-top: 33rpx;
	width: 630rpx;
	height: 222rpx;
	background: #fff;
	&_item {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		font-size: $uni-font-size-lg;
		&_coupon {
			font-size: $uni-font-size-base;
			color: $uni-text-color-grey;
		}
		&_old {
			color: $uni-text-color-grey;
			text-decoration: line-through;
		}
		&_new {
			font-size: $uni-font-size-lg;
			color: red;
			font-weight: 900;
		}
	}
}
.explain {
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	border-radius: 13rpx;
	padding: 30rpx;
	margin-top: 33rpx;
	width: 630rpx;
	background: #fff;
	margin-bottom: 141rpx;

	&_title {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		&_text {
			font-size: $uni-font-size-lg;
			font-weight: 900;
		}
		&_radio {
			display: flex;
			align-items: center;
			&_text {
				font-size: $uni-font-size-lg;
				margin-bottom: 8rpx;
				color: $uni-text-color-grey;
			}
		}
	}
	&_item {
		font-size: $uni-font-size-base;
		color: $uni-text-color-grey;
		margin-top: 33rpx;
	}
}

.btn {
	padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
	padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 108rpx;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: space-around;
	&_money {
		display: flex;
		align-items: center;
		&_title {
			font-size: $uni-font-size-lg;
		}
		&_num {
			font-size: $uni-font-size-lg;
			font-weight: 900;
			color: red;
		}
	}
	&_pay {
		background: $template-background;
		color: $uni-text-color-inverse;
		width: 166rpx;
		height: 49rpx;
		padding: 6rpx 16rpx;
		line-height: 49rpx;
		text-align: center;
		border-radius: 40rpx;
	}
}
</style>
